UI.MethodologyUsageInterpreter = function(params){

	this.cleanUI = function() {
	};
	
	this.displayContentOn = function(divId, variables) {
	};
	
	this.renderVariableListOn = function(divId, variables) {
		var variableContainer = $(divId);
		
		var fieldset = $("<fieldset></fieldset>").attr("name", "variable-information").attr("enabled", true).attr("class", "general variable-selection");
		fieldset.append($("<legend></legend>").append($("<label></label>").text("Please select the variables you consider most important for your project")));		
		
		var selectedVariableList = $("<select></select>");
		selectedVariableList.attr("id", "selected-variables");
		selectedVariableList.attr("name", "selected-variables");
		selectedVariableList.attr("multiple", "multiple");
		selectedVariableList.attr("class", "option-list variable-list");

		var unselectedVariableList = $("<select></select>");
		unselectedVariableList.attr("id", "unselected-variables");
		unselectedVariableList.attr("name", "unselected-variables");
		unselectedVariableList.attr("multiple", "multiple");
		unselectedVariableList.attr("class", "option-list variable-list");
		
		for (var i=0; i < variables.length; i++) {
			var variable = variables[i];

			var optionInput = $("<option></option>");
			optionInput.attr("id", variable.id);
			optionInput.attr("value", variable.id);
			optionInput.text(variable.name);
			unselectedVariableList.append(optionInput);
			unselectedVariableList.append(optionInput);
			unselectedVariableList.append(optionInput);
		}

		var buttonContainer = $("<div></div>").attr("class", "move-buttons-container");
		var moveLeftButton = $("<input></input>").attr("class", "left-button").attr("type", "button").attr("value", ">>").attr("id", "unselected-variables-button");
		var moveRigthButton = $("<input></input>").attr("class", "right-button").attr("type", "button").attr("value", "<<").attr("id", "selected-variables-button");
		
		buttonContainer.append(moveLeftButton);
		buttonContainer.append(moveRigthButton);
		
		
		var optionSelectContainer = $("<div></div>").attr("class", "select-container-left").append(unselectedVariableList);
		var answerSelectContainer = $("<div></div>").attr("class", "select-container-rigth").append(selectedVariableList);

		var listContainer = $("<div></div>").attr("class", "options-container");
		listContainer.append(optionSelectContainer);
		listContainer.append(buttonContainer);
		listContainer.append(answerSelectContainer);

		var doneButton = $("<a></a>").attr("href", "#").attr("class", "button").text("Done");
		
		fieldset.append(listContainer);
		fieldset.append($("<div></div>").attr("class","var-selection-button").append(doneButton));
		variableContainer.append(fieldset);
		
		$("#unselected-variables-button").click(function(event) {
		    move_list_items("unselected-variables","selected-variables");
		});

		$("#selected-variables-button").click(function(event) {
		    move_list_items("selected-variables","unselected-variables");
		});

		doneButton.click(function() {
			var variableList = new Array();
			
			$("#selected-variables option").each(function (index,value) {
				var variable = new Object();
				variable.id = value.id;
				variable.name = value.text;
				variableList.push(variable);
			});
			
			var interpreter = new UI.MethodologyUsageInterpreter();
			interpreter.renderVariableInputTableOn("#project-configuration-container", variableList);
			$("#project-configuration-section").show();
		});
	};

	this.renderVariableInputTableOn = function(variableContainerId, variableList) {
		var validityErrosContainer = $("<div></div>").attr("class", "validity-errors-container").attr("id","validity-errors-container");
		var variablesContainer = $("<div></div>").attr("class", "variables-container")
		var submitButton = $("<a></a>").attr("href", "#").attr("class", "button").text("Generate Report");
		submitButton.click(function(){
			var interpreter = new UI.MethodologyUsageInterpreter();
			if ( interpreter.displaysFormErrorsOn("#validity-errors-container") ) {
				var variableInputArray = new Array();
				
				$("[type=number]").each(function (index,input) {
					var elementList = $("[type=number]").get(index);
					var userInput = new Object();
					userInput.variableId = parseInt(elementList.id);
					userInput.input = parseInt(input.value);
					
					variableInputArray.push(userInput);
				});
				
				$.ajax({
						url: "http://www.methodology-survey.com.ar/json/methodologyUsage.json",
						data: { json: $.toJSON(variableInputArray)},      
						type: "GET",
						dataType: "json",
					  	success: function(report){
					  		var interpreter = new UI.MethodologyUsageInterpreter();
					  		interpreter.renderReportUsageOn("#report-usage-container", report);
					  		$("#report-usage-section").show();
						}
					});
			}
		});

		
		var fieldset = $("<fieldset></fieldset>").attr("name", "variable-input").attr("enabled", true).attr("class", "general variable-configuration");
		fieldset.append($("<legend></legend>").append($("<label></label>").text("Please enter the input for each variable")));		
		fieldset.append(variablesContainer);
		fieldset.append($("<div></div>").attr("class","generate-report-container").append(submitButton));
		fieldset.append(validityErrosContainer);
		
		var variableListContainer = $(variableContainerId);
		variableListContainer.html("");
		variableListContainer.append(fieldset);
		 
		
		for (var i=0; i < variableList.length; i++) {
			var variable = variableList[i];
		
			var label = $("<label></label>").text(variable.name).attr("id", "label-" + variable.id);
			var input = $("<input>").attr("id", variable.id).attr("name", variable.id + "-variable").attr("type","number")
			input.attr("min", 0).attr("max", 100).attr("step", 5).attr("required", true).attr("class", "text-input");
			
			var variableInputContainer = $("<div></div>").attr("class","variable-input-container");
			variableInputContainer.append(label);
			variableInputContainer.append(input);
			variablesContainer.append(variableInputContainer);
		}
	};
	
	
	this.displaysFormErrorsOn = function(divId) {
		var container = $(divId);
		container.html("");
		var total = 0;
		
		$("[type=number]").each(function (index,input) {
		    if ( input.value.trim().length > 0 ) {
		    	total += parseInt(input.value);
		    }
		});
		
		if ( total > 100 ) {
			container.append($("<label></label>").text("The grand total can't exceed 100").attr("class", "input-validity-error"));
			return false;
		} 
		
		if ( total < 100 ) {
			container.append($("<label></label>").text("You need to complete 100.").attr("class", "input-validity-error"));
			return false;
		} 
		
		return true;
	};
	
	
	
	this.renderReportUsageOn = function(divId, report) {
		var reportUsageContainer = $(divId);
		reportUsageContainer.html("");
		
		var fieldset = $("<fieldset></fieldset>").attr("enabled", true).attr("class", "general project-configuration");
		fieldset.append($("<legend></legend>").append($("<label></label>").text("Methodology Usage Statistics")));		

		var winnerContainer = $("<div></div>").attr("id", "top-methodology").attr("class", "top-methodology-container");
		winnerContainer.append($("<label></label>").attr("class","grey-label").text("The best methodology for your configuration is "));
		winnerContainer.append($("<label></label>").attr("class","bold").text(report.bestMethodologyScore.methodology.name));
		winnerContainer.append($("<label></label>").attr("class","grey-label").text("."));

		var statsContainer = $("<div></div>").attr("id", "methodology-stats-container").attr("class", "methodology-stats-container");
		var countContainer = $("<div></div>").attr("id", "methodology-count-container").attr("class", "methodology-count-container");
		countContainer.append($("<label></label>").attr("class", "methodology-count-label").text("Total survey count is " + report.surveyCount + "."));
		
		fieldset.append(winnerContainer);
		fieldset.append(statsContainer);
		fieldset.append(countContainer);
		reportUsageContainer.append(fieldset);

		this.drawVisualization(statsContainer.attr("id"), report);

	};
	
	this.drawVisualization =  function(containerId, report) {
	  // Create and populate the data table.
	  var data = new google.visualization.DataTable();
	  var range = report.worstMethodologyScore.score;
	
	  var methodologies = [];
	  var scores = ['Score'];
	
	  for (var i=0; i < report.methodologiesScore.length; i++) {
		  	var methodologyScore = report.methodologiesScore[i];
		  	var methodologyName = methodologyScore.methodology.name;
		  	methodologies.push(methodologyName);
			scores.push(methodologyScore.score * 10);
	  }

	  var raw_data = [scores];
	  
	  data.addColumn('string', 'Methodology');
	  
	  for (var i = 0; i  < raw_data.length; ++i) {
	    data.addColumn('number', raw_data[i][0]);    
	  }
	  
	  data.addRows(methodologies.length);

	  for (var j = 0; j < methodologies.length; ++j) {    
	    data.setValue(j, 0, methodologies[j].toString());    
	  }
	  
	  for (var i = 0; i  < raw_data.length; ++i) {
	    for (var j = 1; j  < raw_data[i].length; ++j) {
	      data.setValue(j-1, i+1, raw_data[i][j]);    
	    }
	  }
	  
	  // Create and draw the visualization.
	  new google.visualization.ColumnChart(document.getElementById(containerId)).
	      draw(data,
	           {
	    	  	title:"Methodology Usage Report Statistics", 
	            width:700,
	            height:400,
	            vAxis: {minValue: 0,maxValue: 100},
	            hAxis: {title: "Methodologies"}
	           }
	      );
	}	

};